What is the purpose and difference between <p>, <h1>–<h6>?

The <p> tag is used to define a paragraph of text, while <h1>–<h6> are heading tags that define section headings. Headings represent a document’s structure and hierarchy, where <h1> is the highest-level heading (most important) and <h6> is the lowest-level heading (least important).

Example of <p> and <h1>–<h6>

Key Differences

1<p> defines **blocks of text** as paragraphs, focusing on content flow.
2<h1>–<h6> define headings, establishing the document’s outline and hierarchy.
3<h1> should be **used once per page** to represent the main title.
4
Headings (<h1>–<h6>) improve accessibility and SEO by providing structure.
5
Paragraphs can follow headings to add descriptive content.

Semantic Structure Example

Difficulty: 2/10

Topics: semantic HTML, accessibility, document structure

Scenario Questions

0-2 years experience

1
You're building a simple blog post page. How would you use <h1>, <h2>, and <p> tags to structure the title, subtitle, and body text?
2
If you accidentally used a <p> tag for the article title, what visual and accessibility issues might a user encounter?
3
What default browser styling differences would you notice between a <p> element and an <h2> element?

2-5 years experience

1
Your team generated a table of contents from heading tags, but some sections are missing because developers used <div class='heading'> instead of proper <h*> tags. How would you debug and fix this?
2
During a redesign a developer swapped all <h3> tags for <p class='heading'> to keep styling consistent, and you saw a drop in SEO rankings. Explain why that happened and how you'd correct it.
3
You need to add a new subsection to a page that already has an <h1> and several <h2>s. How do you decide which heading level to use, and what effect does that have on the document outline?

5-8 years experience

1
Our documentation site relies on heading hierarchy for search indexing, but many legacy pages use <b> for section titles. Design a migration plan to replace those with appropriate <h1>-<h6> tags while preserving visual styling and minimizing downtime.
2
We have a reusable 'Title' component that applies CSS styling but currently renders as a <div>. How would you modify it to emit the correct semantic heading tag based on context without breaking existing layouts?
3
Discuss the performance and accessibility trade‑offs of using native heading tags versus adding role='heading' with ARIA attributes in a high‑traffic web app.

8+ years experience

1
Our company is consolidating multiple product sites into a single design system. How would you architect guidelines, tooling, and code‑review processes to enforce consistent <h1>-<h6> usage across teams for SEO and accessibility at scale?
2
A legacy CMS stores raw HTML with inconsistent heading usage. Propose a strategy to refactor the content model and rendering pipeline to enforce semantic headings while maintaining backward compatibility.
3
When building a progressive web app that is rendered both server‑side and client‑side, what considerations around heading semantics and hydration do you need to address to avoid mismatches and SEO penalties?

Follow-up Questions

❓How does proper heading hierarchy influence SEO and screen‑reader navigation?
❓What problems arise if you replace headings with styled <div> or <p> elements?
❓Can you describe a scenario where changing a heading level caused a layout or accessibility regression?